Day07——陣列物件

2024 iThome 鐵人賽

DAY 7

佛心分享-IT 人自學之術

JavaScript自學分享系列第 7 篇

16th鐵人賽

姐姐恩

2024-09-18 23:55:22

59 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

陣列
取得資料:陣列[索引值]
取得陣列長度:陣列.length
宣告陣列:

let arr=[1, 2, 3];
arr.push(0); //在陣列的最後添加一個資料(括號內的值)。
//此陣列變成[1, 2, 3, 0]

跟著影片練習:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 流程控制：物件基礎</title>
    </head>
    <body>
        <script>
            //建立陣列物件
            let grades=[100, 75];
            grades.push(70); 
            grades.push(50);
            grades.push(84);
            console.log(grades);
            // console.log(grades[0]);
            // console.log(grades[1]);
            // console.log(grades[2]);

            //利用for迴圈，逐一取得陣列中的資料
            let total=0; //用來記錄累加的結果
            for(let i=0;i<grades.length;i++){
                total+=grades[i];
            }
            let avg=total/grades.length; //求平均
            console.log(avg);
        </script>
    </body>
</html>

印出:

索引
使用規則:
索引是從零開始，故索引值為0，表示該陣列中的第一個資料，而該陣列的長度等於最大索引值加一。

宣告方式：

宣告新陣列及陣列內資料類型。

const arr1 = new Array(element0, element1, /* … ,*/ elementN);
const arr2 = Array(element0, element1, /* … ,*/ elementN);
const arr3 = [element0, element1, /* … ,*/ elementN];

宣告變數，陣列為變數的資料類型。
先宣告新陣列長度(陣列索引值)，

用索引值定義陣列內物件

const emp = [];
emp[0] = "apple";
emp[1] = "grape";
emp[2] = "pear";

索引在for迴圈上的使用方式
＊後面會詳細介紹迴圈!
1.

const colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]); //表示要程式一個個印出陣列中的資料。
}

(和第3點的forEach()方法相似)
2.

const divs = document.getElementsByTagName("div");
for (let i = 0, div; (div = divs[i]); i++) {
//放入處理div的程式碼
}

索引在forEach()上的使用方式
＊如果在宣告陣列時，沒有被定義的該索引位置不會被列出，如果欲列出，要手動輸入undefined。

const myArray = ["first", "second", , "fourth"];

myArray.forEach((element) => {
  console.log(element);
});
//結果:
// first
// second
// fourth

if (sparseArray[2] === undefined) { //
  console.log("sparseArray[2] 是 undefined"); // true
}

const nonsparseArray = ["first", "second", undefined, "fourth"];

nonsparseArray.forEach((element) => {
  console.log(element);
});
//結果:
// first
// second
// undefined
// fourth

組合陣列方式

concat():將多個陣列內容拼在一起。

let myArray = ["1", "2", "3"];
myArray = myArray.concat("a", "b", "c");
// myArray 现在是 ["1", "2", "3", "a", "b", "c"]

join():將陣列中的所有元素，組成一串字串。

const myArray = ["Apple", "Mango", "Pear"];
const list = myArray.join(" - ")ｕｎ; // list 现在是 "Apple - Mango - Pear"

＊push():在陣列中的最後一個元素後，再新增一個元素。
＊pop():移除在陣列中的最後一個元素。
＊shift():移除在陣列中的第一個元素。
＊unshift():在陣列中的開頭新增一個或多個元素。
＊slice():從陣列中提取一個片段，並回傳一個新的陣列。
＊at():指定陣列中的索引值，並回傳該索引值的元素，如果索引超出範圍，則回傳undefined。
＊splie(欲刪除的起始索引值, 欲刪除的結束索引值, 要替換的元素):從陣列元素中刪除一些元素。
＊reverse():顛倒陣列中元素的順序(第一個索引位置的元素變最後一個，第二個變倒數第二個，依此類推...)。
＊flat():將陣列的深度展平至同一層。(通常預設深度為1)
＊sort():對陣列中的元素(英文字串、數字)進行排序。
＊indexOf(欲查找的元素, 起始查找的索引位置):查找欲搜尋元素的索引值(左至右)。
＊lastIndexOf():類似indexOf，指是進行方向為反向(右至左)。
＊forEach():列出陣列中的每個元素。
＊map():將陣列A裡的元素，依照需求處理過後（不影響原元素），生成一個新的陣列B。
＊flatMap():類似map的運作方式，只是是先執行map()，陣列再如flat()，展開至深度為1。
＊filter():對陣列進行過濾，只保留符合條件（回傳True）的元素。
＊find():類似filter，但只回傳被條件式回傳true的第一項元素。
＊findLast():類似find，但只回傳被條件式回傳true的最後一項元素。
＊findIndex():類似find，但只回傳被條件式回傳true的第一項元素的索引值。
＊findLastIndex():類似findIndex，但只回傳被條件式回傳true的最後一項元素的索引值。